<template>
    <div class="student-editor">
        <el-dialog
            title="修改学生信息"
            :close-on-click-modal="false"
            :visible.sync="dialogFormVisible"
            width="590px"
        >
            <el-form
                :model="form"
                :rules="rules"
                class="dialog-form"
                @submit.native.prevent
            >
                <el-form-item
                    label="学号："
                    prop="sno"
                    :label-width="formLabelWidth"
                >
                    <el-input v-model.trim.number="form.sno"></el-input>
                </el-form-item>
                <el-form-item
                    label="姓名："
                    prop="name"
                    :label-width="formLabelWidth"
                >
                    <el-input v-model.trim="form.name"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    round
                    :loading="loading"
                    size="small"
                    class="btn-hover"
                    @click="edit"
                >
                    确定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { studentEdit } from '../../../../../api/courseReach';
export default {
    data() {
        const checkNum = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('学号不能为空'));
            }

            if (!Number.isInteger(value)) {
                return callback(new Error('请输入数字'));
            } else {
                callback();
            }
        };
        return {
            loading: false,
            dialogFormVisible: false,
            info: {},
            form: {
                id: '',
                sno: '',
                name: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                ],
                sno: [
                    { required: true, validator: checkNum, trigger: 'blur' }
                ]
            },
            formLabelWidth: '120px'
        };
    },
    methods: {
        init(data) {
            const { name, sno, className, id } = data;
            this.info = data;
            this.form.id = id;
            this.form.name = name;
            this.form.sno = sno;
            this.dialogFormVisible = true;
        },
        edit() {
            const { name, sno, className } = this.info;
            if (name == this.form.name && sno == this.form.sno) {
                this.$message.error('您还未修改信息');
                return false
            }

            this.loading = true;
            studentEdit(this.form).then((res) => {
                this.loading = false;
                this.$message.success('修改成功');
                this.$emit('refresh');
                this.dialogFormVisible = false;
            }).catch(() => {
                this.loading = false;
            });
        }
    }
};
</script>

<style lang="scss">
.student-editor {
    .dialog-form {
        padding: 26px 62px 0 37px;
    }

    .el-dialog__body {
        padding-bottom: 0;
    }

    .el-input__inner {
        width: 100%;
    }

    .el-input-number {
        width: 100%;
        line-height: 32px;
        .el-input__inner {
            text-align: left;
        }
    }

    .el-input-number__increase,.el-input-number__decrease {
        line-height: 15px !important;
    }

    .el-form-item__content {
        line-height: 30px;
    }

    .el-dialog__footer {
        padding-top: 8px;
    }

    .dialog-footer {
        text-align: center;
        .el-button--small, .el-button--small.is-round {
            padding: 9px 30px;
        }

        .el-button {
            font-size: 14px;
            border-color: #1277EB;
            color: #1277EB;
        }
    }

    .btn-hover:hover {
        background: #1277eb;
        color: #fff !important;
    }
}
</style>
